<script setup>
import {ref} from 'vue'
import {useStudyRoomStore} from "@/stores/index.js";


//----------------------------控制自习室各组件的显示与隐藏 ----------------------------
const store = useStudyRoomStore()
const openWidget = (index) => {
 switch (index)
  {
    case 1:
      store.widgetSwitch.translate = !store.widgetSwitch.translate
      break
    case 2:
      store.widgetSwitch.calculator = !store.widgetSwitch.calculator
      break
    case 3:
      store.widgetSwitch.toDo = !store.widgetSwitch.toDo
      break
    case 4:
      store.widgetSwitch.calendar = !store.widgetSwitch.calendar
      break
    case 5:
      store.widgetSwitch.teacher = !store.widgetSwitch.teacher
      break
  }
}
//----------------------------沉浸模式的进入与退出----------------------------
const inFullScreen = () => {
  if (document.fullscreenElement) {
    store.menuSwitch = true
    document.exitFullscreen();

  } else {
    document.documentElement.requestFullscreen();
    store.menuSwitch = false
  }
}
//----------------------------------每日打卡-----------------------------------
const clockInStatus = ref(false)
const clockIn = () => {
  if(clockInStatus.value)
  {
    ElMessage.success("您已经打卡过了")
  }
  else
  {
    ElMessage.success("打卡成功")
    clockInStatus.value = true
  }
}
//----------------------------控制悬浮框的显示与隐藏----------------------------
let timer = null  // 定时器
const isShow = ref(false) // 状态变量
const mouseIn = () => {
  if(timer) clearTimeout(timer)
  isShow.value = true;
}
const mouseOut = () => {
  timer = setTimeout(function(){
    isShow.value = false;
  },400);
}
</script>

<template>
  <div class="footer">

    <div class="four-button">
      <div class="f-tip" @mouseenter="mouseIn" @mouseleave="mouseOut" :class="{active: !isShow}">
          <div class="f-t-item" @click="openWidget(1)">
            <img src="@/assets/icon/StudyRoom/study-room-icon5.png" alt="" class="icon">
            <div class="text">翻译</div>
          </div>

          <div class="f-t-item" @click="openWidget(2)">
            <img src="@/assets/icon/StudyRoom/study-room-icon6.png" alt="" class="icon">
            <div class="text">计算器</div>
          </div>

          <div class="f-t-item" @click="openWidget(3)">
            <img src="@/assets/icon/StudyRoom/study-room-icon7.png" alt="" class="icon">
            <div class="text">便签</div>
          </div>

          <div class="f-t-item" @click="openWidget(4)">
            <img src="@/assets/icon/StudyRoom/study-room-icon8.png" alt="" class="icon">
            <div class="text">日历</div>
          </div>

      </div>

      <div class="footer-item" @mouseenter="mouseIn" @mouseleave="mouseOut">
        <img src="../../assets/icon/StudyRoom/study-room-icon1.png" alt="">
        <div>常用工具</div>
      </div>

      <div class="footer-item" @click="openWidget(5)">
        <img src="../../assets/icon/StudyRoom/study-room-icon2.png" alt="">
        <div>求助教师</div>
      </div>

      <div class="footer-item" @click="inFullScreen">
        <img src="../../assets/icon/StudyRoom/study-room-icon3.png" alt="" v-if="store.menuSwitch">
        <div v-if="store.menuSwitch" >沉浸模式</div>
        <div v-else>退出沉浸模式</div>
      </div>

      <div class="footer-item" @click="clockIn">
        <img src="../../assets/icon/StudyRoom/study-room-icon4.png" alt="" v-if="!clockInStatus">
        <div v-if="!clockInStatus">每日打卡</div>
        <img src="../../assets/icon/StudyRoom/ok.png" alt="" v-if="clockInStatus">
        <div v-if="clockInStatus">明日再来</div>
      </div></div>
  </div>
</template>

<style scoped lang="scss">
.footer {
  position: fixed;
  bottom: 40px;
  width: 100%;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  .four-button{
    width: 45%;
    height: 100%;display: flex;
    justify-content: center;
    align-items: center;
    gap: 65px;
    .f-tip {
      position: absolute;
      top: -165px;
      left: calc(50% - 635px);
      width: 260px;
      height: 150px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 20px 20px 0 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 10px;
      padding: 15px;
      .f-t-item {
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border: 1px solid rgba(138, 174, 235, 1);
        .icon {
          width: 30px;
          height: 30px;
        }
        &:hover {
          background-color: rgba(255, 255, 255, 1);
        }
      }
    }
    .active{
      display: none;
    }
    .footer-item {
      min-width: 150px;
      height: 100%;
      border-radius: 27px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      background-color: rgba(255, 255, 255, 0.9);
      border: 2px solid rgba(138, 174, 235, 1);
      cursor: pointer;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>
